---
title: "Accessibility Checker Rule Help: IBMA_Color_Contrast_WCAG2AA_PV"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Verify the contrast ratio of the text against the lightest and the darkest colors of the background meets the WCAG 2.1 AA minimum requirements for text of size {1}px and weight of {2} 

<div id="locLevel"></div>

The contrast ratio of text against a color gradient or a background image must meet WCAG 2.1 AA requirements 

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

When text and its background colors have less than a 4.5 to 1 contrast ratio it can be difficult for people with moderately low vision to read the text without a contrast-enhancing technology. For larger text of 18 points or more, or bold 14 point text, the text and background colors must give at least a 3 to 1 contrast ratio.

<div id="locSnippet"></div>

### What to do

* Text should always have a solid background (i.e. not a color gradient or a background image) where possible;
* OR when that is not possible (which is very rare), manually check the contrast ratio of the text against the lightest and the darkest colors of the background with a [Color Contrast Analyzer](https://www.ibm.com/able/toolkit/verify/manual/#color). For regular text it must be at least 4.5 to 1. For large text at least 18 point or at least 14 point when bold, the contrast ratio must be at least 3 to 1. If less, adjust the colors.

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 1.4.3 Contrast (Minimum)](https://www.ibm.com/able/requirements/requirements/#1_4_3)
[WCAG 2.1 technique G18 ](https://www.w3.org/WAI/WCAG21/Techniques/general/G18)
[WCAG 2.1 technique G145 ](https://www.w3.org/WAI/WCAG21/Techniques/general/G145)

### Who does this affect?

* People with moderately low vision who do not use a contrast-enhancing technology 
* People who do not see the full range of colors 
* People who see no color

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
